<template>
  <div
    class="echarts"
    id="piechartbing"
    ref="chartReflist"
    style="width: 100%; height: 300px"
  ></div>
  <div class="echaets-text">本测评共涉及{{namesString}}相关知识。建议优先学习下图显示的知识点，并按照学习指数“先长后短”的顺序进行提升！</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GraphicComponent, // 引入 GraphicComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer ,SVGRenderer} from "echarts/renderers";
import type { PieSeriesOption  } from "echarts/charts";
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  ToolboxComponentOption,
  GraphicComponentOption, // 引入 GraphicComponentOption 类型
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
// import { ref, reactive, onMounted, watch } from "vue";

const props = defineProps<{
  echartsdata: [];
}>();

type ECOption = ComposeOption<
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | ToolboxComponentOption
  | GraphicComponentOption
>;

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer,
  GraphicComponent, // 注册 GraphicComponent
]);

const chartReflist = ref<HTMLElement | null>(null);
const handleTextClick = () => {
  // console.log("点击了底部的文字");
  // 在这里添加你想要的点击事件逻辑
};
var pieData = props.echartsdata;
var defaultColor = [
  "#BDEFDB",
  "#5AD8A6 ",
  "#BDD2FD",
  "#5B8FF9",
  "#FF99C3",
  "#269A99",
  "#FF9D4D",
  "#9270CA",
  "#6DC8EC",
  "#E8684A",
  "#F6BD16",
  "#5D7092",
  "#5B8FF9",
  "#46A9A8",
];
const namesString = ref()
onMounted(() => { 
// onMounted(()=>{  

// })


  if (chartReflist.value) {
    // const chart = echarts.init();
    const chart = echarts.init(
      chartReflist.value,
        null,
        { renderer: "svg" } // ⚠️ 必须指定 SVG 渲染器
      );
    const optionpie = {
      //你的代码
      legend: {
        // orient: "vertical", // 设置图例垂直排列
        // left: "70%", // 将图例放置在图表右侧
        // top: "20%",
        itemWidth: 10, // 调整图例图标宽度
        itemHeight: 10, // 调整图例图标高度，宽高一致以保证是圆形
        // itemGap: 10, // 调整图例项之间的间距
        // icon: "circle", // 设置图例图标为圆形
        // 设置图例在饼图下方，水平居中
        left: "5%",

        bottom: "10%",

        textStyle: {
          color: "#8393A3", // 设置图例字体颜色
        },
        
      },
      tooltip: {
        trigger: "item",
        formatter: "{b} {d}%",
      },
      series: [
        {
          title: {
            text: "",
            subtext: "",
            x: "left",
            // left: "5%",
            show: false,
          },

          // //   label: {
          //     show: false, // 不显示数据标签（名称）
          // //   },
          // labelLine: {
          //     show: false // 不显示标签引导线
          // },
          // itemStyle: {
          //     borderWidth: 0 // 去掉边线
          // },
          color: defaultColor,
          type: "pie",
          radius: ["0%", "50%"],
          center: ["50%", "30%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "outside",
            padding: [0, 0, 0, -25],
            formatter: "{b}\n{c}",
            color: "#fff",
            fontSise: 14,
          },
          labelLine: {
            show: true,
            // length: -30,
          },
          labelLayout: {
            hideOverlap: false, //是否隐藏重叠标签
          },
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 1.2,
          },
          emphasis: {
            label: {
              color: "#fff",
              fontSise: 14,
            },
          },
          data: pieData,
        },
      ],
    };

    const chartDom = document.getElementById("piechartbing");
    if (chartDom) {
      // const myChart = echarts.init(chartDom);
      const myChart = echarts.init(
        chartDom,
        null,
        { renderer: "svg" } // ⚠️ 必须指定 SVG 渲染器
      );
      myChart.setOption(optionpie);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(optionpie);
    chart.on("click", (params) => {
     
      if (params.componentType === "graphic") {
        handleTextClick();
      }
    });
  }
   namesString.value = props.echartsdata.map(item => item.name).join(','); // 无分隔符拼接
   console.log(namesString.value)
});
</script>
<style lang="less" scoped>
.echarts{
  padding: 0 20px 0 0;
}
.echaets-text{
    padding: 0 5vw;
    text-align: left;
    font-size: 14px;
    line-height: 22px;
}
</style>
